<template>
    <div class="banner-box">
        <div class="banner-title">
            <div>
                <span class="title-icon"></span>banner管理</div>
            <div class="add" @click="add()" v-if="btnAuthority.xzBtn">
                <i class="el-icon-plus"></i>
                <span>新增</span>
            </div>
        </div>
        <div class="banner-list-box" v-loading="loading">
            <!-- banner详情 -->
            <div class="banner-list-item">
                <div class="list-item" v-for="(item,index) in listItem" :key='index'>
                    <div class="list-title">{{item.title}}</div>
                    <div class="list-img"><img :src="item.accessoryid" alt=""></div>
                    <div class="list-control">
                        <div class="control-title">首页展示{{index + 1}}</div>
                        <div class="control">
                            <span class="item-control1" @click="edit(item)" v-if="btnAuthority.xzBtn">编辑</span>
                            <span class="item-control2" @click="del(item)" v-if="btnAuthority.xzBtn">删除</span>
                        </div>
                    </div>
                    <div class="list-map">展示地市: {{item.cityname | filtersCityname}}</div>
                </div>
            </div>
            <el-pagination @current-change="handleCurrentChange" :total="Page.total" :current-page="Page.pageNum" :page-size="Page.pageSize" layout="total, prev, pager, next, jumper" background>
            </el-pagination>
        </div>
    </div>
</template>
<style scoped src="./index.css">
</style>
<script src="./index.js">
</script>